<template>
  <div class="container-fluid bg-white">
    <div class="container">
      <el-row type="flex" class="row-bg" justify="space-between" align="middle">
        <el-col :span="2"><img class="logo" src="@/assets/images/logo.png" alt="logo图片"/></el-col>
        <el-col :span="6">
          <el-menu class="el-menu-demo" mode="horizontal" router>
            <el-menu-item index="/views">首页</el-menu-item>
            <el-menu-item index="/member">个人中心</el-menu-item>
            <el-menu-item index="/order">订单管理</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="16">
              <Login/>
            </el-col>
            <el-col :span="8" v-if="!user">
              <el-button type="primary" plain @click="toRegisterPage">注册</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Login from "@/views/components/Login";
import {mapGetters} from "vuex";
export default {
  name: 'NavbarComponent',
  components: {Login},
  computed: {
    ...mapGetters(["token", "user"]),
  },
  methods: {
    // 前往注册页面
    toRegisterPage() {
      this.$router.push({ name: 'register'})
    }
  }
}
</script>

<style lang="scss" scoped>

.container {
  .logo {
    width: 200px;
  }
}

//隐藏下划线
.el-menu.el-menu--horizontal {
  border: 0px;
}
</style>
